<template>
	<view class="i-order-reminder" :style="[viewPosition]" v-if="noticeList && noticeList.length">
		<swiper class="swiper" vertical autoplay circular :interval="3000">
			<block v-for="(item, index) in noticeList" :key="index">
				<swiper-item class="swiperitem">
					<view class="e-flex  tips_content overflow-hidd">
						<view class="avatar e-m-r-10" v-if="option.showAvatar">
							<load-image mode="aspectFill" :size="['50rpx']" shape="circle" :src="item.userPhoto" >
								<template #error>
									<app-image mode="aspectFill" :size="['50rpx']" shape="circle" src="default-headerImg.png" ></app-image>
								</template>
							</load-image>
						</view>
						<view  v-if="option.showTime">
							<text class="white-nowrap"  :style="[{ color: option.timeColor }]">{{ item.remark }}</text>
							
						</view>
						<view class="e-m-l-10 e-line-1">{{ item.nickName[0] }}xx{{ $t('layout.下单成功') }}</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="swiper-mack e-abso"></view>
	</view>
</template>
<script lang="ts" setup>
	import { ref,computed } from 'vue'
	import { px2rpx } from './utils'
	import { getOrderReminder } from '@/common/request/api'
	import type { OrderReminderItem } from '@/common/request/api'
	
	const props = withDefaults(defineProps<{
		option : {
			//1左上角2右上角3左下角4右下角
			componentPosition: 1|2|3|4,
			//圆角
			borderRadius: number
			//透明度
			opacity: number
			//背景颜色
			backgroundColor:string
			//文字颜色
			fontColor: string
			//时间颜色
			timeColor: string
			//是否显示头像
			showAvatar: boolean
			//是否显示时间
			showTime: boolean
			//数据条数
			dataCount: number
			//1真实数据 2虚拟数据
			dataType: 1|2,
			//边距
			paddingTop: number
			paddingBottom: number
		}
	}>(), {
		option: () => ({
			componentPosition: 1,
			borderRadius: 16,
			opacity: 50,
			backgroundColor: 'rgba(0, 0, 0, 1)',
			fontColor: 'rgba(255, 255, 255, 1)',
			timeColor: 'rgba(245, 34, 45, 1)',
			showAvatar: true,
			showTime: true,
			dataCount: 5,
			dataType: 1,
			paddingTop: 0,
			paddingBottom: 0,
		})
	})
	
	const noticeList = ref<OrderReminderItem[]>([])
	
	const viewPosition = computed(() => {
		
			let str
			switch (props.option.componentPosition) {
				case 1:
					// #ifdef APP-PLUS || MP-WEIXIN||MP-ALIPAY
					str = { top: 44 + props.option.paddingTop + 'px', left: px2rpx(props.option.paddingBottom) }
					// #endif
					// #ifdef H5
					str = { top: props.option.paddingTop + 'px', left: px2rpx(props.option.paddingBottom) }
					// #endif
					break
				case 2:
					// #ifdef APP-PLUS || MP-WEIXIN||MP-ALIPAY
					str = { top: 44 + props.option.paddingTop + 'px', right: px2rpx(props.option.paddingBottom) }
					// #endif
					// #ifdef H5
					str = { top: props.option.paddingTop + 'px', right: px2rpx(props.option.paddingBottom) }
					// #endif
					break
				case 3:
					str = { bottom: px2rpx(props.option.paddingTop), left: px2rpx(props.option.paddingBottom) }
					break
				case 4:
					str = { bottom: px2rpx(props.option.paddingTop), right: px2rpx(props.option.paddingBottom) }
					break
			}
			let style = {
				background: props.option.backgroundColor,
				borderRadius: px2rpx(props.option.borderRadius),
				color: props.option.fontColor,
				opacity: props.option.opacity / 100
			}
			return { ...str, ...style }
		
	})
	
	getOrderReminder().then(res => {
		noticeList.value = res.data
	})

</script>
<style scoped lang="scss">
.i-order-reminder {
	position: fixed;
	z-index: $z-index-highest;
	width: 330rpx;
	.swiper {
		height: 62rpx;
		line-height: 62rpx;
		.swiperitem {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			.tips_content {
				padding: 0 6rpx;
				height: 62rpx;
				.avatar {
					flex: 0 0 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background: #fff;
				}
			}
		}
	}
	.swiper-mack {
		width: 100%;
		height: 100%;
		z-index: $z-index-most;
		left: 0;
		top: 0;
	}
}
</style>
